<template>
  <transition name="slide">
    <div class="vi-dialog_wrapper" v-if="visibility" @click="close">
      <div class="vi-dialog" @click.stop>
        <div class="vi-dialog-header">
          <div class="title">
            <label>{{ title }}</label>
            <span v-if="unit">（{{ unit }}）</span>
          </div>
          <div class="close" @click="close">X</div>
        </div>

        <div class="vi-dialog-body">
          <div class="header-content">
            <div class="header-list" v-if="timeShow">
              <label>时间</label>
              <el-date-picker
                @change="changeTime"
                value-format="yyyy-MM-dd"
                v-model="time"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
            <div class="header-list" v-if="yearShow">
              <label>年份</label>
              <el-select
                v-model="year"
                placeholder="请选择"
                @change="changeYear"
              >
                <el-option
                  v-for="item in yearList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="header-list" v-if="monthShow">
              <label>月份</label>
              <el-select
                v-model="month"
                placeholder="请选择"
                @change="changeMonth"
              >
                <el-option
                  v-for="item in monthList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="header-list" v-if="deptShow">
              <label>地区</label>
              <el-select
                v-model="value"
                placeholder="请选择"
                @change="changeDept"
              >
                <el-option
                  v-for="item in deptList"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId"
                >
                </el-option>
              </el-select>
            </div>
            <div class="header-list" v-if="projectShow">
              <label>项目</label>
              <el-select
                v-model="projectId"
                placeholder="请选择"
                @change="changeProject"
              >
                <el-option
                  v-for="item in projectList"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <slot></slot>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import Qs from "qs";
export default {
  name: "vi-dialog",
  props: {
    visibility: {
      default: false,
      type: Boolean
    },
    title: {
      default: "",
      type: String
    },
    unit: {
      default: "",
      type: String,
      require: false
    },
    deptShow: {
      default: false
    },
    monthShow: {
      default: false
    },
    yearShow: {
      default: false
    },
    timeShow: {
      default: false
    },
    projectShow:{
      default: false
    },
    deptList: {
      default: () => []
    }
  },
  data() {
    return {
      options: [],
      value: -1,
      yearList: [],
      year: "2020",
      time: "",
      month: "",
      monthList: [],
      projectId: null,
      projectList: [],
    };
  },
  watch: {
    value:{
      handler(){
        this.getProjectInfoByDeptId();
      },
      immediate:true,
    },
  },
  created() {
    this.setTime();
    let yearList = [];
    let monthList = [];
    for (let i = 0; i < 10; i++) {
      yearList.push({
        id: 2015 + i,
        name: `${2015 + i}年`
      });
    }
    this.yearList = yearList;
    // this.year = null;
    for (let i = 0; i < 12; i++) {
      monthList.push({
        id: i + 1,
        name: `${i + 1}月`
      });
    }
    this.monthList = monthList;
  },
  methods: {
    getProjectInfoByDeptId() {
      // this.isShowContent=false
      this.projectId = null;
      //获取项目列表
      request({
        url: "/system/screen/getProjectInfoByDeptId",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.value,
        }),
      }).then((res) => {
        this.projectList = res.data;
      });
    },
    changeProject(){
      this.$emit("changeProject", this.projectId);
    },
    setTime() {
      // if (this.timeShow) {
        const time = new Date();
        const year = time.getFullYear();
        const month = time.getMonth() + 1;
        const day = time.getDate();
        this.time = `${year}-${month}-${day}`;
        this.year=`${year}`
        this.month=month
      // }
    },
    close() {
      this.$emit("update:visibility", false);
    },
    changeDept() {
      this.$emit("changeDept", this.value);
    },
    changeYear() {
      this.$emit("changeYear", this.year);
    },
    changeMonth() {
      this.$emit("changeMonth", this.month);
    },
    changeTime() {
      this.$emit("changeTime", this.time);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/dialog.scss";
</style>
